import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:imitatectripapp/model/common_model.dart';
import 'package:imitatectripapp/model/grid_nav_model.dart';
import 'package:imitatectripapp/widget/webview.dart';

// 网格卡片
class GidNav extends StatelessWidget {
  final GridNavModel gridNavModel;

  const GidNav({Key key, @required this.gridNavModel}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return PhysicalModel(
      color: Colors.transparent,//设置透明
      borderRadius: BorderRadius.circular(6), //圆角
      clipBehavior: Clip.antiAlias, //裁切
      child: Column(
        children: _gridNavItems(context),
      ),
    );
  }
  // 网格卡片
  _gridNavItems(BuildContext context) {
    List<Widget> items = [];
    if (gridNavModel == null) return items;
    if (gridNavModel.hotel != null) {
      items.add(_gridNavItem(context, gridNavModel.hotel, true));
    }
    if (gridNavModel.flight != null) {
      items.add(_gridNavItem(context, gridNavModel.flight, false));
    }
    if (gridNavModel.travel != null) {
      items.add(_gridNavItem(context, gridNavModel.travel, false));
    }
    return items;
  }

  // 其中的一行卡片
  _gridNavItem(BuildContext context, GridNavItem gridNavItem, bool first) {
    //first表示是不是第一行
    List<Widget> items = [];
    // 第一页那个大的卡片区域
    items.add(_mainItem(context, gridNavItem.mainItem));
    items.add(_doubleItem(context, gridNavItem.item1, gridNavItem.item2));
    items.add(_doubleItem(context, gridNavItem.item3, gridNavItem.item4));

    // 为了让水平布局充满
    List<Widget> expandItems = [];
    items.forEach((element) {
      expandItems.add(Expanded(
        child: element,
        flex: 1,
      ));
    });
    // 设置颜色变量：
    Color startColor = Color(int.parse('0xff' + gridNavItem.startColor));
    Color endColor = Color(int.parse('0xff' + gridNavItem.endColor));
    return Container(
      height: 88,
      margin: first ? null : EdgeInsets.only(top: 3),
      decoration: BoxDecoration(
          // 线性渐变
          gradient: LinearGradient(colors: [startColor, endColor])),
      child: Row(
        children: expandItems,
      ),
    );
  }

// 大的卡片区域
  _mainItem(BuildContext context, CommonModel mainItem) {
    return _wrapGesture(
        context,
        Stack(
          alignment: AlignmentDirectional.topCenter,
          children: <Widget>[
            Image.network(
              mainItem.icon,
              fit: BoxFit.contain,
              width: 88,
              height: 121,
              alignment: AlignmentDirectional.bottomEnd,
            ),
            Container(
              margin: EdgeInsets.only(top: 11),
              child: Text(
                mainItem.title,
                style: TextStyle(fontSize: 14, color: Colors.white),
              ),
            )
          ],
        ),
        mainItem);
  }

  // 小的卡片区域
  _doubleItem(
      BuildContext context, CommonModel topItem, CommonModel bottomItem) {
    // isCenterItem标识是不是在中间

    return Column(
      children: <Widget>[
        Expanded(
          child: _item(context, topItem, true),
        ),
        Expanded(
          child: _item(context, bottomItem, false),
        )
      ],
    );
  }

// 小卡片区域中的每一项
  _item(BuildContext context, CommonModel item, bool first) {
    // 定义一个border变量
    BorderSide borderSide = BorderSide(width: 0.8, color: Colors.white);
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
              left: borderSide, bottom: first ? borderSide : BorderSide.none),
        ),
        child: _wrapGesture(
            context,
            Center(
              child: Text(
                item.title,
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 14, color: Colors.white),
              ),
            ),
            item),
      ),
    );
  }

  // 点击每一项的时候能够跳转到详情页
  _wrapGesture(BuildContext context, Widget widget, CommonModel model) {
    return GestureDetector(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => WebView(
                      url: model.url,
                      statusBarColor: model.statusBarColor,
                      hideAppBar: model.hideAppBar,
                    )));
      },
      child: widget,
    );
  }
}
